<template>
	<view class="container">
		<view class="bg">

		</view>
		<view class="shop-bind" v-if="bindlistData.length>0">
			<view class="tip">
				<image src="../../static/icon/shop_bind_bg.png" mode="heightFix"></image>
			</view>
			<view class="shop">
				<view class="shop-icon">
					<image src="../../static/icon/shop_icon.png" mode=""></image>
				</view>
				<view class="content">
					<view class="name">
						大佬建设
					</view>
					<view class="desc">
						类型：个人
					</view>
				</view>
				<view class="bind-type">
					<view class="dot"></view>
					<view class="">
						已绑定
					</view>
				</view>
			</view>

		</view>
		<view class="shop-bind bind_none" v-else>
			暂无已绑定店铺
		</view>
		<view class="bind-title">

			<image src="../../static/icon/shop_bind_icon.png" mode="widthFix"></image>
			<view class="title-text">选择商户绑定</view>

		</view>
		<view class="listBox">
			<scroll-view class="list-wrapper" scroll-y="true" v-if="unBindlistData.length > 0">

				<checkbox-group @change="checkboxChange">
					<view class="shop-unbind" v-for="item in unBindlistData" :key="item.value">
						<view v-if="!item.bindSn">
							<checkbox :value="item.lsMerchantNo" :checked="item.checked" />
						</view>
						<view class="shop">
							<view class="content">
								<view class="name">
									{{item.merSubName}}
								</view>
								<view class="desc">
									类型：{{item.merchantType=='MICRO'?"小微商户":item.merchantType=='INDIVIDUAL'?"个体工商户":"企业"}}
								</view>
								<text class="success">
									审核成功
								</text>
							</view>
							<view class="bind-type">
								<view class="dot " :class="item.bindSn?'select':''"></view>
								<view :class="item.bindSn?'textSelect':''">
									{{item.bindSn?"已绑定":"未绑定"}}
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>



			</scroll-view>
		</view>
		<view class="btn-list">
			<button class="clear" @click="clear()">清除所选</button>
			<button class="confirm" @click="bindShop()">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		shopLists,
		merchantschangeBindSn
	} from "@/api/mine.js";
	import {
		useStore
	} from "@/store";

	/** store实例 */
	const store = useStore();

	const checkedData = ref([])


	onShow(() => {
		refresh();
	});
	// 创建响应式数据  
	const alertDialog = ref();
	let time = ref(null);
	let params = reactive({
		sn: store.currentMerchantInfomation.merchantId,
		userId: store.userInfo.userId,
		lsMerchantNo: null,
		oemUserNo: 'BU100002'
	});
	onLoad((option) => {


	});
	const unBindlistData = ref([])
	const bindlistData = ref([])

	//这个函数为checkboxgroup的change事件
	const checkboxChange = (e) => {
		//循环列表先都置为false （未选中状态）
		console.log("e=" + JSON.stringify(e))
		unBindlistData.value.forEach((a) => {
			a.checked = false
			// allCheck.value = false
		})
		//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
		unBindlistData.value.forEach((a) => {
			console.log(e.detail.value);
			e.detail.value.forEach((b) => {
				if (a.value == b) {
					a.checked = true
				}
			})
		})
		// //如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
		// if (e.detail.value.length == items.length) {
		// 	allCheck.value = true
		// }
		//将选中的数组保存在某个ref中
		checkedData.value = e.detail.value
		console.log("checkedData=" + JSON.stringify(checkedData.value));
	}


	function getShopList() {
		shopLists(store.userInfo.userId, store.currentMerchantInfomation.merchantId).then((res) => {
			//未绑定显示unbind和bind

			res.unbind.forEach((a) => {
				console.log("a=" + 0)
				a.bindSn = false
				let newA = JSON.parse(JSON.stringify(a));
				unBindlistData.value.push(newA)

			})
			const copiedArray = ref(res.bind.slice());
			if (copiedArray.value.length > 0) {
				copiedArray.value.forEach((a) => {
					console.log("a=" + 1)
					a.bindSn = true
					let newA = JSON.parse(JSON.stringify(a));
					unBindlistData.value.push(newA)
				})
			}

			bindlistData.value = res.sn;
		});
	}

	function bindShop() {

		if (checkedData.value.length === 0) {
			showToast("请选择店铺", "none");
			return;
		}
		params.lsMerchantNo = checkedData.value[0];
		merchantschangeBindSn(params)
			.then((res) => {
				console.log("merchantschangeBindSn=" + res);
				refresh();
			})
			.catch((err) => {

			});
	}
	function refresh(){
		unBindlistData.value=[];
		getShopList();
	}

	function clear() {

		unBindlistData.value.forEach((a) => {
			a.checked = false
			// allCheck.value = false
		})
		console.log("unbind=" + JSON.stringify(unBindlistData))
		checkedData.value = [];
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss"></style>